<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta name="decorator" content="default" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link href="${ctxStatic}/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<link href="${ctxStatic}/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<style type="text/css">
.main{
	padding: 15px 0px 0px 0px;
}
.panel-primary>.panel-heading {
    background-image: linear-gradient(to bottom, #008cd6 0, #3eb5ea 100%);
}
.panel-body {
    height: 420px;
}
</style>
<title>首页</title>
<script type="text/javascript">
$(document).ready(function() {
	$.ajax({
		url : "${ctxStatic}/common/map/340600.json",
		type : "get",
		dataType : "json",//jsonp数据类型 
		jsonp : "callback",//服务端用于接收callback调用的function名的参数 
		jsonpCallback : "message",
		success : function(data) {
			$.getJSON("${ctxStatic}/common/map/340600.json");
			echarts.registerMap('xuancheng', data);

			var chartMap = echarts.init(document.getElementById('map'));
			
			chartMap.setOption(optionMap);
			//轮播展示
			setInterval(function() {
				var dataLen = optionMap.series[0].data.length;
				// 取消之前高亮的图形
				chartMap.dispatchAction({
					type : 'downplay',
					seriesIndex : 0, //表示series中的第几个data数据循环展示
					dataIndex : currentIndex
				});
				currentIndex = (currentIndex + 1) % dataLen; //+1表示每次跳转一个
				// 高亮当前图形
				chartMap.dispatchAction({
					type : 'highlight',
					seriesIndex : 0,
					dataIndex : currentIndex
				});
				// 显示 tooltip
				chartMap.dispatchAction({
					type : 'showTip',
					seriesIndex : 0,
					dataIndex : currentIndex
				});
			}, 1000);
			//鼠标点击事件
			/* chartMap.on('click', function(params) {
				var cityName = params.name;
				var cityValue = params.value;
				alert(cityName + "***" + cityValue);
			}); */
		},
		error : function() {
			alert('fail....');
		}
	});
	
	var StockAndSalesChart = echarts.init(document.getElementById('StockAndSales'));
	StockAndSalesChart.setOption(StockAndSalesOption);
	
	var ChildrenRecordChart = echarts.init(document.getElementById('ChildrenRecord'));
	ChildrenRecordChart.setOption(ChildrenRecordOption);
	
	var PeopleChart1 = echarts.init(document.getElementById('People1'));
	PeopleChart1.setOption(optionPie1);
	
// 	var vedioData = $.parseJSON('${video}');
// 	var vedioData = JSON.parse('${video}');
// 	var vedioData = JSON.parse('{"errorCode":0,"errorMessage":"fetchPreviewXml success!"}');
	/* var vedioXml = vedioData.data;
	if (vedioXml){
		var vedioOcx = document.getElementById("vedio");
		var vedio = vedioOcx.SPV_StartPreview(xml.data);
		if (vedio != 0) {
			//SPV_GetLastError();
			alert("单路预览失败：" + spvxOcx.SPV_GetLastError());
			alert("单路预览失败：" + xml.data);
		}
	} */
	/* setInterval(function() {
		var dataLen = optionMap.series[0].data.length;
		// 取消之前高亮的图形
		ChildrenRecordChart.dispatchAction({
			type : 'downplay',
			seriesIndex : 0, //表示series中的第几个data数据循环展示
			dataIndex : currentIndex
		});
		currentIndex = (currentIndex + 1) % dataLen; //+1表示每次跳转一个
		// 高亮当前图形
		ChildrenRecordChart.dispatchAction({
			type : 'highlight',
			seriesIndex : 0,
			dataIndex : currentIndex
		});
		// 显示 tooltip
		ChildrenRecordChart.dispatchAction({
			type : 'showTip',
			seriesIndex : 0,
			dataIndex : currentIndex
		});
	}, 1000); */
	
	showTempCharts();
	
	showHumiCharts();
});

function SetLocalParam(vedioOcx) {
    //var ocxObj = document.getElementById("spv");
    //var devPxRa = window.devicePixelRatio;
    var devPxRa = screen.deviceXDPI / screen.logicalXDPI;
    var height = $('#spv').height() * devPxRa ;
    var width = $('#spv').width() * devPxRa;
//alert(devPxRa);
    var xml = '<?xml version="1.0" encoding="UTF-8"?> ' +
        '<localParam> ' +
		'<width>' + width + '</width> ' +
		'<height>' + height + '</height> ' +
        '<picType>1</picType> ' +
        '<capturePath>D:\\Hikvision</capturePath> ' +
        '<recordSize>2</recordSize> ' +
        '<recordPath>D:\\Hikvision</recordPath> ' +
		'<limitPreviewTime>1800</limitPreviewTime> ' +
        '</localParam>';
    var ret = vedioOcx.SPV_SetLocalParam(xml);
    if (ret != 0) {
        alert("单路预览设置本地参数失败");
    }
}

var currentIndex = -1;
var optionMap = {
	tooltip : {
		trigger : 'item'
	},
	dataRange : {
		min : 800,
		max : 50000,
		text : [ 'High', 'Low' ],
		realtime : false,
		calculable : true,
		color : [ '#254d8c', '#32c3ff', '#32e4ff', '#4477c4',
				'#329cff' ],
		show : false
	},
	series : [ {
		type : 'map',
		map : 'xuancheng',
		layoutCenter : [ '50%', '50%' ],
		layoutSize : 300,
		itemStyle : {
			normal : {
				borderWidth : 1, //区域边框宽度
				borderColor : '#12446d', //区域边框颜色
				label : {
					show : true,
					color : '#000'
				},
				areaColor : [ '#2c74d3' ]
			},
			emphasis : {
				label : {
					show : true,
					color : '#fff'
				},
				areaColor : '#32fdff'
			}
		},
		data : [ {
			name : '杜集区',
			value : 16
		}, {
			name : '烈山区',
			value : 18
		}, {
			name : '相山区',
			value : 20
		}, {
			name : '濉溪县',
			value : 27
		}, ]
	} ]
};

var StockAndSalesOption = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['领取/购进','下级退回','退回上级','报废','下发/售出','月末总库存']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2017年1月','2017年2月','2017年3月','2017年4月','2017年5月','2017年6月','2017年7月','2017年8月','2017年9月','2017年10月','2017年11月','2017年12月']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'领取/购进',
            type:'line',
            stack: '总量',
            data:[191, 234, 290, 330, 310 ,220, 182, 191, 234, 2600, 60000, 5310]
        },
        {
            name:'下级退回',
            type:'line',
            stack: '总量',
            data:[330, 310 , 4201, 154, 3190, 1950, 26405, 201, 154, 190, 950, 26405]
        },
        {
            name:'退回上级',
            type:'line',
            stack: '总量',
            data:[0, 0 , 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        },
        {
            name:'报废',
            type:'line',
            stack: '总量',
            data:[ 8491, 5150, 6232,1320, 4332,3820, 5760, 9001, 9034, 3290, 1330, 10010]
        },
        {
            name:'下发/售出',
            type:'line',
            stack: '总量',
            data:[ 257192, 445760, 257192, 435760, 357192, 257192, 425760, 357192,257192, 415760, 357192, 63760]
        },
        {
            name:'月末总库存',
            type:'line',
            stack: '总量',
            data:[331606, 302306,351606, 202906, 445393,333606, 342906, 345393, 331606, 302906, 345393, 322578]
        }
    ]
};

var ChildrenRecordOption = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    color: ['#3398DB'],
    legend: {
    	data:['人数']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [ {
		type : 'category',
		data: ['濉溪镇卫生院  '  , '孟山中路门诊   ' , '淮海路门诊     ' , '百善镇卫生院   ' , '铁佛镇岳集分院 ' ,
			'临涣镇卫生院   ' , '南坪镇卫生院   ' , '孙疃镇卫生院   ' , '韩村镇卫生院   ' , '五沟镇卫生院   ' , 
			'铁佛镇卫生院   ' , '双堆镇三和分院 ' , '宋疃镇卫生院   ' , '刘桥镇卫生院   ' , '双堆镇卫生院   ' ,
			'四铺镇五铺门诊 ' , '孙疃镇杨柳分院 ' , '张庄医院       ' , '四铺镇卫生院   ' , '五沟镇白沙分院 ' , 
			'曲阳社区       ' , '杜集区人民医院 ' , '赵集卫生院     ' , '南坪镇任集门诊 ' , '百善镇徐楼分院 ' , 
			'古饶镇卫生院   ' , '相城医院       ' , '渠沟镇卫生院   ' , '烈山镇卫生院   ' , '凤凰社区中心   ' , 
			'石台镇卫生院   ' , '杨庄街道中心   ' , '人民路中心     ' , '任圩社区       ' , '临涣镇海孜分院 ' ,
			'第四人民医院   ' , '高岳社区中心   ' , '大山头门诊     ' , '坡里卫生院     ' , '牛眠卫生院     ' ,
			'朔里镇中心卫生院', '矿医杨庄分院   ' , '段元镇卫生院   ' , '皖北二院       ' , '百善矿医院     ' ,
			'矿医朔里分院   ' , '烈山区海孜医院 ' , '矿医岱河分院   ' , '矿医袁庄分院   ' , '矿医童亭分院   ' ,
			'任楼矿医院     ' , '青龙山社区     '
		],
		axisLabel:{
			interval:0,//横轴信息全部显示  
		    rotate:45, //刻度旋转45度角
		    textStyle:{
		    	fontSize:6
			}
		}
	}],
    yAxis : [ {
	    type : 'value'
	} ],
    series : [ {
		//name:'领取/购进',
		type:'bar',
		data:[3386 , 2291 , 1876 , 1109 , 1094 ,
			1003 , 982  , 950  , 921  , 871  ,
			847  , 833  , 778  , 774  , 691  ,
			684  , 677  , 665  , 663  , 661  , 
			634  , 592  , 589  , 583  , 562  , 
			509  , 487  , 470  , 448  , 433  , 
			414  , 388  , 365  , 353  , 339  ,
			323  , 289  , 268  , 262  , 246  , 
			218  , 206  , 195  , 148  , 105  ,
			97   , 94   , 89   , 77   , 74   ,
			73   , 33 ] 
    } ]
};

var optionPie1 = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['一次性注射器',
        	'乙肝疫苗(酿酒酵母)',
        	'百白破疫苗(无细胞)',
        	'A+C群流脑疫苗(多糖)',
        	'A+C群流脑疫苗(结合)',
        	'乙肝疫苗(汉逊酵母)',
        	'麻风疫苗',
        	'乙脑减毒活疫苗',
        	'二价脊灰疫苗',
        	'麻腮风疫苗   ',
        	'甲肝减毒活疫苗(冻干)',
        	'狂犬病疫苗(Vero冻干)',
        	'Hib疫苗',
        	'狂犬病疫苗(Vero)',
        	'狂犬病疫苗(地鼠肾)','其他' ]
    },
    series : [ {
	    name: '库存比例',
	    type: 'pie',
	    radius : '65%',
	    center : ['70%', '60%'],
	    data:[
	    	{value:127000	, name:'一次性注射器 '},
	    	{value:31366	, name:'乙肝疫苗(酿酒酵母)'},
	    	{value:22800	, name:'百白破疫苗(无细胞)'},
	    	{value:17440	, name:'A+C群流脑疫苗(多糖)'},
	    	{value:15700	, name:'A+C群流脑疫苗(结合)'},
	    	{value:12310	, name:'乙肝疫苗(汉逊酵母)'},
	    	{value:11270	, name:'麻风疫苗'},
	    	{value:10620	, name:'乙脑减毒活疫苗'},
	    	{value:9520     , name:'二价脊灰疫苗'},
	    	{value:9280     , name:'麻腮风疫苗'},
	    	{value:8560     , name:'甲肝减毒活疫苗(冻干)'},
	    	{value:7655     , name:'狂犬病疫苗(Vero冻干)'},
	    	{value:6700     , name:'Hib疫苗'},
	    	{value:4272     , name:'狂犬病疫苗(Vero)'},
	    	{value:4200     , name:'狂犬病疫苗(地鼠肾)'} ,
	    	{value:23885     , name:'其他'}
	    ],
	    itemStyle: {
	        emphasis: {
	            shadowBlur: 10,
	            shadowOffsetX: 0,
	            shadowColor: 'rgba(0, 0, 0, 0.5)'
	        }
	    }
	} ]
};

function showTempCharts(){
// 	var date = new Date();//获取当前时间  
	//date.setDate(date.getDate() - 1);//设置天数 -1 天  
	var curDate = new Date();
	var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天
	debugger;
	$.ajax({
		type: "post",
		dataType: "json",
		url: "${ctx}/ccsenhumidata/sensorHumiData/tempHumiData",
		data: {"sensorName":"100C7F01", "startTime":formatDate(preDate), "endTime":formatDate(curDate)},
		timeout: 60000,
		success: function(data){
			var bool = data.success;
			if(bool){
				var xAxisTempData = data.xAxisTempData.split(',');
				var seriesTempData = data.seriesTempData.split(',');
				var upperTempData = data.upperTempData.split(',');
				var lowerTempData = data.lowerTempData.split(',');
				var ChartTempData = echarts.init(document.getElementById('TempData'));
				option = {
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross'
				        }
				    },
				    xAxis:  {
				        type: 'category',
				        boundaryGap: false,
				        data: xAxisTempData
				    },
				    yAxis: {
						min: function(value) {
						    return value.min - 4;
						},
				    	max: function(value) {
						    return value.max + 5;
						},
				        type: 'value',
				        axisLabel: {
				            formatter: '{value} ℃'
				        },
				        axisPointer: {
				            snap: true
				        }
				    },
				    series: [ {
				            name:'时间',
				            type:'line',
				            smooth: true,
				        },
				        {
				            name:'温度',
				            type:'line',
				            smooth: true,
				            data: seriesTempData,
				            markPoint : {  
	                            data : [  
	                                {type : 'max', name: '最大值'},  
	                                {type : 'min', name: '最小值'}  
	                            ]
	                        },  
				            markLine : {  
	                            data : [  
	                                {type : 'average', name: '平均值'}  
	                            ]  
	                        },
	                        itemStyle: {
						        normal: {
						            color: "#1E91FF",
						            lineStyle: {
						                color: "#1E91FF"
						            }
						        }
						    }
				        },
				        {
				        	name: '温度上限',
				        	type: 'line',
				        	smooth: true,
				        	symbol: 'none',
				        	data: upperTempData,
				        	itemStyle: {
						        normal: {
						            color: "#FFA500",
						            lineStyle: {
						                color: "#FFA500"
						            }
						        }
						    }
				        },
				        {
				        	name: '温度下限',
				        	type: 'line',
				        	smooth: true,
				        	symbol: 'none',
				        	data: lowerTempData,
				        	itemStyle: {
						        normal: {
						            color: "#2E8B57",
						            lineStyle: {
						                color: "#2E8B57"
						            }
						        }
						    }
				        }
				    ]
				};
				ChartTempData.setOption(option);//绑定ECharts参数
			}
		}
	});
}

function showHumiCharts(){
	var curDate = new Date();
	var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天
	$.ajax({
		type: "post",
		dataType: "json",
		url: "${ctx}/ccsenhumidata/sensorHumiData/tempHumiData",
		data: {"sensorName":"6017E306", "startTime":formatDate(preDate), "endTime":formatDate(curDate)},
		timeout: 60000,
		success: function(data){
			var bool = data.success;
			if(bool){
				var xAxisHumiData = data.xAxisHumiData.split(',');
				var seriesHumiData = data.seriesHumiData.split(',');
				var upperHumiData = data.upperHumiData.split(',');
				var lowerHumiData = data.lowerHumiData.split(',');
				
				var ChartHumiData = echarts.init(document.getElementById('HumiData'));
				option = {
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross'
				        }
				    },
				    xAxis:  {
				        type: 'category',
				        boundaryGap: false,
				        data: xAxisHumiData
				    },
				    yAxis: {
				        type: 'value',
				        axisLabel: {
				            formatter: '{value}%RH'
				        },
				        axisPointer: {
				            snap: true
				        }
				    },
				   
				    series: [
				    	{
				            name:'时间            ',
				            type:'line',
				            smooth: true,
				        },
				        {
				            name:'湿度',
				            type:'line',
				            smooth: true,
				            data: seriesHumiData,
				            markPoint : {  
	                            data : [  
	                                {type : 'max', name: '最大值'},  
	                                {type : 'min', name: '最小值'}  
	                            ]  
	                        },  
				            markLine : {  
	                            data : [  
	                                {type : 'average', name: '平均值'}  
	                            ]  
	                        },
	                        itemStyle: {
						        normal: {
						            color: "#1E91FF",
						            lineStyle: {
						                color: "#1E91FF"
						            }
						        }
						    }
				        },
				        {
				        	name: '湿度上限',
				        	type: 'line',
				        	smooth: true,
				        	symbol: 'none',
				        	data: upperHumiData,
				        	itemStyle: {
						        normal: {
						            color: "#FFA500",
						            lineStyle: {
						                color: "#FFA500"
						            }
						        }
						    }
				        },
				        {
				        	name: '湿度下限',
				        	type: 'line',
				        	smooth: true,
				        	symbol: 'none',
				        	data: lowerHumiData,
				        	itemStyle: {
						        normal: {
						            color: "#2E8B57",
						            lineStyle: {
						                color: "#2E8B57"
						            }
						        }
						    }
				        },
				        
				    ]
				};
				//绑定ECharts参数
				ChartHumiData.setOption(option);
			}
		}
	});
}

function formatDate(date) {
	//debugger;
	if (!date||date=='null') {
		return "";
	}
	var d = new Date(date), month = '' + (d.getMonth() + 1), day = ''
			+ d.getDate(), year = d.getFullYear();
	if (month.length < 2)
		month = '0' + month;
	if (day.length < 2)
		day = '0' + day;
	return [ year, month, day ].join('-');
};

</script>

</head>
<body>
	<div class="main container-fluid">
		<div class="row-fluid">
			<div class="col-md-4">
				<div class="panel panel-primary">
					<div class="panel-heading">
						进销存数据统计
					</div>
					<div  id="StockAndSales" class="panel-body">内容加载中...</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="panel panel-primary">
					<div class="panel-heading">
						区域门诊数量统计
					</div>
					<div class="panel-body" id = "map">内容加载中...</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="panel panel-primary">
					<div class="panel-heading">
						冷链温度分布图
					</div>
					<div  class="panel-body" id = "TempData">内容加载中... </div>
				</div>
			</div>
		</div>
		<div class="row-fluid">
			<div class="col-md-4">
				<div class="panel panel-primary">
					<div class="panel-heading">
						门诊年服务人数统计
					</div>
					<div class="panel-body" id = "ChildrenRecord">内容加载中...</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="panel panel-primary">
					<div class="panel-heading">
						疫苗比例统计
					</div>
					<div  id="People1" class="panel-body">内容加载中... </div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="panel panel-primary">
					<div class="panel-heading">
						冷链湿度分布图
					</div>
					<div class="panel-body" id = "HumiData">
						<object classid="clsid:461284E8-135D-44B3-BD59-549150A773EC" id="spv"  width="100%" height="100%" />
					</div>
				</div>
			</div>
			
		</div>
	</div>
</body>
</html>